
import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { render } from 'react-dom';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
import { Modal, Tools, SearchBar, WingBlank, Button, List, Checkbox, Icon } from 'weaver-mobile';
import { SelectPage } from 'weaver-mobile-page';

const alert = Modal.alert;
const getLabel = Tools.getLabel;

@withRouter
@inject('homeStore')
@observer
export default class Breadcrumb extends React.Component {
  static defaultProps = {
    prefixCls: 'msg-setting-home',
  }

  backEvent(callback) {
    const { homeStore, prefixCls, history, breadLevel } = this.props;
    const { detailSetting } = homeStore;
    if (homeStore.dataChange) {
      alert(getLabel("523683", '保存当前页修改信息?'), '', [{
        text: getLabel("31129", "取消"), onPress: () => {
          if (callback && typeof callback.cancle == 'function') {
            callback.cancle();
            callback.back();
          } else {
            history.goBack();
            if (breadLevel == 2) {
              homeStore.getLoadUserMsgConfig();
            } else if (breadLevel == 3) {
              // nothing
            }
          }
        }
      }, {
        text: getLabel("33703", "确认"), onPress: () => {
          if (callback && typeof callback.confirm == 'function') {
            callback.confirm();
            callback.back();
          } else {
            history.goBack();
            if (breadLevel == 2) {
              homeStore.saveUserMsgConfig();
            } else if (breadLevel == 3) {
              if (detailSetting.otherParams.detatilType === "2") {
                homeStore.saveWorkflowDetail()
              } else {
                homeStore.saveDetailConfig()
              }
            }
          }
        }
      }])
    } else {
      if (callback && typeof callback.back == 'function') {
        callback.back();
      } else {
        history.goBack();
      }
    }
  }

  render() {
    const { homeStore, prefixCls, history, breadName, breadLevel } = this.props;
    const { detailSetting } = homeStore;
    return (
      <div className={`${prefixCls}-breadcrumb`}>
        <div className="back" onClick={() => { this.backEvent(); }}>
          <Icon type="return-01" />
        </div>
        <div className="bread-nav">
          <div className="bread-icon">
            <Icon className="icon" type="home-page" />
          </div>
          <select
            value={breadLevel}
            onChange={(e, d) => {
              switch (parseInt(e.target.value)) {
                case 1:
                  this.backEvent({
                    cancle: () => {
                      homeStore.getLoadUserMsgConfig();
                    },
                    confirm: () => {
                      if (breadLevel == 3) {
                        if (detailSetting.otherParams.detatilType === "2") {
                          homeStore.saveWorkflowDetail()
                        } else {
                          homeStore.saveDetailConfig()
                        }

                      } else {
                        homeStore.saveUserMsgConfig();
                      }
                    },
                    back: () => {
                      history.push('/home');
                    }
                  })
                  break;
                case 2:
                  this.backEvent({
                    cancle: () => {
                      homeStore.getLoadUserMsgConfig();
                    },
                    confirm: () => {
                      if (detailSetting.otherParams.detatilType === "2") {
                        homeStore.saveWorkflowDetail()
                      } else {
                        homeStore.saveDetailConfig()
                      }
                      homeStore.saveUserMsgConfig();
                    },
                    back: () => {
                      history.push('/home/sublist');
                    }
                  })
                  break;
              }
            }}>
            <option value="1">{getLabel("518463", "消息中心提醒设置")}</option>
            <option value="2">{breadName}</option>
            {(breadLevel == 3) && (
              <option value="3">{getLabel("19342", "详细设置")}</option>
            )}
          </select>
        </div>
      </div>

    )
  }
}
